<!--
用于细粒度访问控制的访问控制组件。
-->
<script lang="ts">
import type { PropType } from 'vue'
import { defineComponent } from 'vue'
import { RoleEnum } from '@/enums/roleEnum'
import { usePermission } from '@/hooks/web/usePermission'
import { getSlot } from '@/utils/helper/tsxHelper'

export default defineComponent({
  name: 'Authority',
  props: {
    /**
     * 指定的角色可见
     * 当权限模式为角色模式时，value可以传递角色值。
     * 当权限模式为后台获取时，value可以传递代码权限值
     * @default ''
     */
    value: {
      type: [Number, Array, String] as PropType<RoleEnum | RoleEnum[] | string | string[]>,
      default: ''
    }
  },
  setup(props, { slots }) {
    const { hasPermission } = usePermission()

    // Render role button
    function renderAuth() {
      const { value } = props
      if (!value) {
        return getSlot(slots)
      }
      // return hasPermission(value) ? slots.default?.() : null
      return hasPermission(value) ? getSlot(slots) : null
    }

    return () => {
      // Role-based value control
      return renderAuth()
    }
  }
})
</script>
